<template>
  <img alt="Vue logo" src="../assets/logo.png" />
  <h1 class="text_title">华铁铁路职业技能鉴定后台系统</h1>
  <div class="demo-shadow" :style="{ boxShadow: `var(--el-box-shadow-light)` }">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
      size="medium"
    >
      <el-form-item label="用户名" prop="name">
        <dev>
          <el-input
            v-model="ruleForm.name"
            type="text"
            autocomplete="off"
          ></el-input>
        </dev>
      </el-form-item>
      <el-form-item label="密码" prop="checkPass">
        <dev>
          <el-input
            v-model="ruleForm.checkPass"
            type="password"
            autocomplete="off"
          ></el-input>
        </dev>
      </el-form-item>
      <el-form-item label="验证码" prop="identifyingCode">
        <dev class="identifyCode">
          <el-row :gutter="100">
            <el-col :span="12">
              <div class="identify_input">
                <el-input
                  v-model="ruleForm.identifyingCode"
                  type="text"
                  autocomplete="off"
                ></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="code" @click="refreshCode">
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
            </el-col>
          </el-row>
        </dev>
      </el-form-item>
    </el-form>
  </div>
  <div class="demo-shadow">
    <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </div>
  <el-dialog v-model="centerDialogVisible" title="警告" width="30%" center>
    <span>用户名或密码错误！！！</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false" type="primary"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
@import url("//unpkg.com/element-plus/dist/index.css");
.text_title {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: #1d5591;
}

.demo-shadow {
  line-height: 50px;
  color: var(--el-text-color-regular);
  font-size: 14px;
  padding-left: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-top: 20px;

  width: 400px;
  margin: 0 auto;
}
.code {
  width: 100%;
  height: 40px;
}

.identify_input {
  width: 100%;
  height: 40px;
}
</style>

<script>
import { ElButton } from "element-plus";
import SIdentify from "../components/Sidentify.vue";
import DataQuery from "../dataGain/DataQuery.vue";
export default {
  name: "Login",
  components: {
    ElButton,
    SIdentify,
  },
  data() {
    const checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入验证码"));
      }

      if (value.length != 4) {
        return callback(new Error("验证码是四位"));
      }
      if (value != this.identifyCode) {
        callback(new Error("验证码输入错误"));
      } else {
        callback();
      }
    };
    const validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        this.ruleForm.name = value;
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        this.ruleForm.checkPass = value;
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        checkPass: "",
        identifyingCode: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        checkPass: [{ validator: validatePass, trigger: "blur" }],
        identifyingCode: [{ validator: checkCode, trigger: "blur" }],
      },
      identifyCodes: "1234567890",
      identifyCode: "",
      centerDialogVisible: false,
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.checkAdministrator();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async checkAdministrator() {
      let promise = DataQuery.methods.queryCollection("administrators");
      let administratorsData = await promise;
      if (administratorsData == undefined) {
        return;
      }
      let entry = administratorsData.find((item) => {
        return item.userName === this.ruleForm.name;
      });
      if (entry != undefined) {
        if (entry.password === this.ruleForm.checkPass) {
          alert("认证成功!");
          return;
        }
      }

      this.centerDialogVisible = true;
      this.refreshCode();
      this.ruleForm.name = "";
      this.ruleForm.checkPass = "";
      this.ruleForm.identifyingCode = "";
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
  },
};
</script>
